<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据转换器</title>
    <link rel="stylesheet" href="../../demo/plugins/select/style.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
        }

        .ew-select {
            width: 100%;
        }

        .container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 700px;
            box-sizing: border-box;
            border: 1px solid #e0e0e0;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }

        h2 {
            color: #34495e;
            margin-top: 25px;
            margin-bottom: 15px;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        .input-group textarea,
        .input-group select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1em;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: border-color 0.3s ease;
            box-sizing: border-box;
        }

        .input-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .input-group select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6c-5%200-9.3%201.8-13.2%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2013.2l128%20127.9c3.9%203.9%208.7%205.8%2013.5%205.8s9.6-1.8%2013.5-5.8L287%2095.4a17.6%2017.6%200%200%200%205.4-13.2c0-5-1.8-9.3-5.4-13.2z%22%2F%3E%3C%2Fsvg%3E');
            background-repeat: no-repeat;
            background-position: right 10px top 50%;
            background-size: 12px auto;
            padding-right: 30px;
        }

        .input-group textarea:focus,
        .input-group select:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 8px rgba(52, 152, 219, 0.2);
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }

        .button-group button {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            color: #fff;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .button-group button.generate {
            background-color: #28a745;
        }

        .button-group button.generate:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }

        .button-group button.reset {
            background-color: #6c757d;
        }

        .button-group button.reset:hover {
            background-color: #5a6268;
            transform: translateY(-2px);
        }

        .result-area {
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 8px;
            min-height: 100px;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.95em;
            color: #333;
            border: 1px solid #dee2e6;
            overflow-x: auto;
        }

        .error-message {
            color: #dc3545;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 10px;
            border-radius: 8px;
            margin-top: 15px;
            display: none;
        }

        .code-snippet {
            margin-top: 30px;
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .code-snippet pre {
            margin: 0;
        }

        .code-snippet .comment {
            color: #75715e;
        }

        .code-snippet .keyword {
            color: #66d9ef;
        }

        .code-snippet .function {
            color: #a6e22e;
        }

        .code-snippet .string {
            color: #e6db74;
        }

        .code-snippet .number {
            color: #ae81ff;
        }

        .code-snippet .operator {
            color: #f92672;
        }
    </style>
</head>

<body>
    <h1>通用数据转换器</h1>

    <div class="container">
        <h2>输入与配置</h2>
        <div class="input-group">
            <label for="inputData">输入数据 (JSON 字符串, 逗号分隔的数字/字符串, 或其他):</label>
            <textarea id="inputData" placeholder="例如: [1, 2, 3] 或 1,2,3 或 {\" a\":1}"></textarea>
        </div>

        <div class="input-group">
            <label for="dataType">数据类型:</label>
            <div id="dataType"></div>
        </div>

        <div class="input-group">
            <label>转换操作:</label>
            <div id="conversionType"></div>
        </div>

        <div class="input-group" id="customGeneratorFunctionGroup" style="display: none;">
            <label for="customGeneratorFunction">自定义生成器函数体 (例如: yield* this.input.split(',').map(Number)):</label>
            <textarea id="customGeneratorFunction"
                placeholder="function* customGen(input) { /* your generator logic here */ }"></textarea>
        </div>

        <div class="button-group">
            <button class="generate" onclick="performConversion()">执行转换</button>
            <button class="reset" onclick="resetForm()">重置</button>
        </div>

        <h2>转换结果</h2>
        <div class="result-area" id="resultArea"></div>
        <div class="error-message" id="errorMessage"></div>
    </div>

    <div class="code-snippet">
        <h2>核心代码片段: generatorToArray 函数</h2>
        <pre><code class="language-javascript">
<span class="keyword">const</span> <span class="function">generatorToArray</span> = gen => [...gen];
        </code></pre>
    </div>

    <script src="../../demo/plugins/select/index.js"></script>
    <script>
        const generatorToArray = gen => [...gen];
        const dataTypeSelect = new Select({
            placeholder: "请选择数据类型",
            container: '#dataType'
        })
        dataTypeSelect.setOptions([
            { label: '数组 (Array)', value: 'array' },
            { label: '集合 (Set)', value: 'set' },
            { label: '映射 (Map)', value: 'map' },
            { label: '字符串 (String)', value: 'string' },
            { label: '数字 (Number)', value: 'number' },
            { label: '对象 (Object)', value: 'object' }
        ])
        dataTypeSelect.setValue('array');
        const conversionTypeSelect = new Select({
            placeholder: "选择生成器函数",
            container: '#conversionType',
            onChange(value) {
                const customGenGroup = document.getElementById('customGeneratorFunctionGroup');
                if (value === 'custom') {
                    customGenGroup.style.display = 'block';
                } else {
                    customGenGroup.style.display = 'none';
                }
            }
        });
        conversionTypeSelect.setOptions([
            { label: 'entries() - 键值对生成器', value: 'entries' },
            { label: 'keys() - 键生成器', value: 'keys' },
            { label: 'values() - 值生成器', value: 'values' },
            { label: '自定义生成器函数 (输入函数体)', value: 'custom' }
        ]);

        conversionTypeSelect.setValue('entries');
        function parseInput(inputStr, type) {
            try {
                if (type === 'array') {
                    return JSON.parse(inputStr);
                } else if (type === 'set') {
                    return new Set(JSON.parse(inputStr));
                } else if (type === 'map') {
                    return new Map(JSON.parse(inputStr));
                } else if (type === 'string') {
                    return inputStr;
                } else if (type === 'number') {
                    return Number(inputStr);
                } else if (type === 'object') {
                    return JSON.parse(inputStr);
                }
            } catch (e) {
                showError('输入数据格式不正确，请检查！');
                return null;
            }
            return inputStr;
        }

        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }

        function clearError() {
            document.getElementById('errorMessage').style.display = 'none';
        }

        function performConversion() {
            clearError();
            const inputDataStr = document.getElementById('inputData').value.trim();
            const dataType = dataTypeSelect.getValue();
            const conversionType = document.getElementById('conversionType').value;
            const resultArea = document.getElementById('resultArea');
            resultArea.textContent = '';

            if (!inputDataStr) {
                showError('请输入数据！');
                return;
            }

            let data;
            try {
                if (dataType === 'array') {
                    data = JSON.parse(inputDataStr);
                } else if (dataType === 'set') {
                    data = new Set(JSON.parse(inputDataStr));
                } else if (dataType === 'map') {
                    data = new Map(JSON.parse(inputDataStr));
                } else if (dataType === 'string') {
                    data = inputDataStr;
                } else if (dataType === 'number') {
                    data = Number(inputDataStr);
                    if (isNaN(data)) {
                        showError('数字类型输入无效！');
                        return;
                    }
                } else if (dataType === 'object') {
                    data = JSON.parse(inputDataStr);
                }
            } catch (e) {
                showError('解析输入数据失败，请检查格式！');
                return;
            }

            let generator;
            try {
                if (conversionType === 'entries' && (dataType === 'array' || dataType === 'set' || dataType === 'map')) {
                    generator = data.entries();
                } else if (conversionType === 'keys' && (dataType === 'array' || dataType === 'set' || dataType === 'map')) {
                    generator = data.keys();
                } else if (conversionType === 'values' && (dataType === 'array' || dataType === 'set' || dataType === 'map')) {
                    generator = data.values();
                } else if (conversionType === 'custom') {
                    const customFuncBody = document.getElementById('customGeneratorFunction').value;
                    if (!customFuncBody) {
                        showError('请输入自定义生成器函数体！');
                        return;
                    }
                    // 动态创建生成器函数
                    const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
                    const CustomGenerator = new AsyncFunction('input', `return (function*() { ${customFuncBody} }).call({input: input});`);
                    generator = CustomGenerator(data);
                } else {
                    showError(`当前数据类型 (${dataType}) 不支持 ${conversionType} 操作。`);
                    return;
                }
            } catch (e) {
                showError('生成器创建失败或操作不支持: ' + e.message);
                console.error(e);
                return;
            }

            try {
                const result = generatorToArray(generator);
                resultArea.textContent = JSON.stringify(result, null, 2);
            } catch (e) {
                showError('转换过程中发生错误: ' + e.message);
                console.error(e);
            }
        }

        function resetForm() {
            document.getElementById('inputData').value = '';
            document.getElementById('dataType').value = 'array';
            document.getElementById('conversionType').value = 'entries';
            document.getElementById('customGeneratorFunction').value = '';
            document.getElementById('customGeneratorFunctionGroup').style.display = 'none';
            document.getElementById('resultArea').textContent = '';
            clearError();
        }
    </script>
</body>

</html>